<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2021/7/6
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>播放视频页面</title>

</head>

<style>
    @import "/css/play_video.css";
    @import "/css/daohang.css";
    @import "/css/header.css";
</style>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>

    $(function () {

        $.ajax({
            url: '/sort/all_sort',
            type: 'get',
            dataType: 'json',
            success: function (jsonData) {
                console.info(jsonData);
                if (0 != jsonData.status) {
                    alert(jsonData.message);
                    return;
                }
                //一级分类
                var supSortList = jsonData.data;
                var len = supSortList.length;
                for (var index = 0; index < len; index++) {
                    var navHTML = ' <button style="" class="links_button button dropdown"><a href="/videos/find_type?sup_type={0}" style="text-decoration: none">{1}</a><span class="dropdown-content">';
                    //一级分类
                    var supSort = supSortList[index];
                    var supType = supSort.type;
                    var supId = supSort.id;
                    navHTML = navHTML.replace('{1}', supType);
                    navHTML = navHTML.replace('{0}', supId);
                    var subSortList = supSort.subSortList;
                    var l = subSortList.length;
                    for (var j = 0; j < l; j++) {
                        //二级分类
                        var subSort = subSortList[j];
                        navHTML += '<a href="/videos/find_type?sup_type=' + supId + '&sub_type=' + subSort.id + '">' + subSort.type + '</a>';
                    }
                    navHTML += '</span></button>';
                    $('#topNav').append(navHTML);
                }

            },
            error: function () {
                alert('加载视频分类数据异常');
            }

        });
    });
</script>
<body>
<div class="header_bd">
    <!-- 头部 -->

    <div class="header">
        <h1><img style="height: 50px;width: 180px"
                 src="">
        </h1>
        <form>
            <input type="text" name="search" placeholder="Search.." class="search">
        </form>
        <button class="searchButton searchButton2">立即搜索</button>
        <div class="login">
            <!-- 登录 -->
            <!-- 注册 -->
            <span><a href="/user/login_user.jsp"><input type="button" class="dlspan" value="登 录"/></a></span>&nbsp;&nbsp;
            <span><a href="/user/register_user.jsp"><input type="button" class="zcspan" value="注 册"/></a></span>
        </div>
    </div>


    <div class="topNav" id="topNav">
        <!-- 导航栏 -->


    </div>
</div>
</div>
<!-- </div> -->
<div id="content">
    <!-- 内容 -->
    <c:choose>
        <c:when test="${ empty requestScope.videosList}">
            <span style="color: red;font-size: 22px"></span>
        </c:when>
        <c:otherwise>
            <ul style="list-style: none;">
                <c:forEach items="${requestScope.videosList}" var="video">
                    <li class="ul_li"><a href="/videos/${video.id}.html" target="_blank"><img class="img"
                                                                                              src="${video.logo}"
                                                                                              alt="${video.title}<"></a>
                        <p><a title="${video.title}<">${video.title}</a></p>
                    </li>
                </c:forEach>
            </ul>
        </c:otherwise>
    </c:choose>
</div>
<!--页头-->
<!--播放器-->

<c:choose>
    <c:when test="${empty requestScope.videoMap}">
        <span style="color: red">该视频不存在</span>
    </c:when>
    <c:otherwise>
        <div>
            <video class="video_v" tabindex="2" id="myVideo" poster="${requestScope.videoMap.logo}" controls
                   autoplay="true" src="${applicationScope.videoURLContext}${requestScope.videoMap.url}">
            </video>
        </div>
        <div class="video_test">
            <div class="video_test01" style="width: 50%;color: aliceblue;float: left">
                播放${empty requestScope.videoMap.play_num?'0':requestScope.videoMap.play_num}次&nbsp;|&nbsp;发布时间:<fmt:formatDate
                    pattern="yyyy年MM月dd日" value="${requestScope.videoMap.add_time}"/>
            </div>
            <div style="width: 50%;color: aliceblue;float: left">
                <ul style="list-style: none">
                    <li class="li1">
                        <div class="like">
                            <div class="img-box">
                                <img src="#" alt="">
                            </div>
                            点赞
                        </div>
                    </li>
                    <li class="li1">
                        <div class="share">
                            <div class="img-box">
                                <img src="#" alt="">
                            </div>
                            收藏
                        </div>
                    </li>
                    <li class="li1">
                        <div class="share" @click="shareHandler">
                            <div class="img-box">
                                <img src="#" alt="">
                            </div>
                            分享
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        </div>
        <div class="video3" style="width:600px">
            <p class="video_title">
                    ${requestScope.videoMap.title}
            </p>
        </div>
        <div class="author">
            <div class="author_pic" style="float: left">
                <a href="#"><img width="60"
                                 src="${ empty requestScope.videoMap.face?'/img/default_head.png':requestScope.videoMap.face}"></a>
            </div>
            <div class="author_user" style="float: left">
                <a href="#">${empty requestScope.videoMap.name?'抖鱼会员用户':requestScope.videoMap.name}</a>
            </div>
        </div>
    </c:otherwise>
</c:choose>

<!--评论-->
<div class="comment_list">
    <!--发布评论-->
    <div class="comment">
        <h3>发布评论</h3>

        <form action="/comments/add" method="post">
            <p> <textarea name="content" cols="60" rows="10" style="width: 400px;height: 100px;resize: none;">

            </textarea>
            </p>
            <button id="comment_b">回复</button>
        </form>
    </div>
    <div class="comment_v">
        <ul style="list-style: none">
            <li>
                <div class="comment_pl">
                    <div class="cpl1">
                        <a href="#">
                            <img src="${requestScope.videoMap.face}">
                        </a>
                    </div>
                    <div class="cpl2">
                        <div class="cpl3">
                            <span class="pluser">${requestScope.videoMap.name}</span>
                        </div>
                        <div class="cpl4">
                            <p>评论的内容</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

</body>
</html>
